<template>
  <div class="box1">
    <div class="box2">
      <h2>号源管理</h2>
      出诊时间
      <el-date-picker v-model="value1" type="date" placeholder="Pick a day" />
      
      
      <el-input
        v-model="input"
        style="width: 240px"
        placeholder="按医生姓名搜索"
      />
      <el-button type="primary">查询</el-button>
      <el-button type="primary">重置</el-button>
    </div>
    <div class="box3">
      <el-button type="primary"> 新增号源 </el-button>
      <el-table class="el-table" :data="tableData" style="width: 100%">
        <el-table-column fixed prop="name" label="医生" width="120" />
        <el-table-column prop="ke" label="科室" width="130" />
        <el-table-column prop="kai" label="出诊时间" width="150" />
        <el-table-column prop="jie" label="出诊时段" width="120" />
        <el-table-column prop="sum" label="号源数" width="120" />
        <el-table-column prop="price" label="挂号费" width="120" />
        <el-table-column prop="state" label="状态" width="120" />
        <el-table-column prop="yu" label="已预约" width="120" />
        <el-table-column prop="time" label="创建时间" width="150" />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button
              size="small"
              style="margin-left: 10px; width: 3.75rem"
              @click="goto(scope.row._id)"
            >
              编辑
            </el-button>
            <el-button size="small" style="width: 3.75rem; margin-top: 5px">
              停诊
            </el-button>
            <el-button
              size="small"
              style="width: 3.75rem; color: #ffff; margin-top: 5px"
              color="#409EFF"
              @click="del(scope.row._id)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="demo-pagination-block">
        <el-pagination
          background
          v-model:current-page="pages"
          v-model:page-size="pageSize"
          :page-sizes="[1, 2, 3, 5]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!-- 分页 -->
  </div>
</template>
<script setup lang="ts">
import axios from "axios";
axios.defaults.baseURL = "http://localhost:3005";
import { ElTable } from "element-plus";
import { onMounted, ref, reactive } from "vue";
import { Plus } from "@element-plus/icons-vue";
import {useRouter} from "vue-router";

const router = useRouter();
const goto = (_id: any) => {
  router.push('/xiang');
}

const input = ref("");
const value1 = ref("");
const tableData = ref([]);
//分页
const pagelist = ref();
const pageSize = ref(5);
const pages = ref(1);
const total = ref(0);

const getList = async () => {
  let res = await axios.get("/haolist", {
    params: {
      pages: pages.value,
      pageSize: pageSize.value,
    },
  });
  // let res = await axios.get("/haolist");
  console.log(res.data.stu);
  tableData.value = res.data.stu;
  total.value = res.data.total;
  pagelist.value = res.data.list;
};

onMounted(() => {
  getList();
});

const handleSizeChange = (val: number) => {
  pageSize.value = val;
  getList();
};

const handleCurrentChange = (val: number) => {
  pages.value = val;
  getList();
};



// 删除
const del = async (_id: any) => {
  let data=await axios.post(`/del/${_id}`)
  getList();
};
</script>
<style scoped >
.box1{
    /* border: 1px solid red; */
    
}
.box2{
    /* border: 1px solid red; */
    background-color: white;
}
.box3{
    margin-top: 20px;
    background-color: white;
}
.box3 .el-table{
    height: 440px;
    /* border: 1px solid red; */
    padding: 20px;
}
.box3 .el-button{
    padding: 20px;
    margin-top: 10px;
    margin-left: 20px;
    margin-bottom: 20px;
 }
.box3 .el-pagination{
    margin-top: 10px;
    margin-left: 950px;
}
</style>
